<script setup lang="ts">
import {ref} from "vue";
import {NButton, NInput,useMessage } from 'naive-ui'
import Border from "../../components/Border.vue";

function add() {
  count.value += 2;
}

function addStep(step: number = 2, event: Event) {
  count.value += step;
}

function submit() {
  const message = useMessage()
  console.log(message)
  message.info(
      "I don't know why nobody told you how to unfold your love",
      {
        keepAliveOnHover: true
      }
  );

}

const count = ref(0)
const content = ref('')

</script>

<template>
  <Border>
    <div class="card">
      <div class="card-header">内联事件处理器</div>
      <div class="card-body">
        <n-button @click="count++">count:{{ count }}</n-button>
      </div>
    </div>
  </Border>
  <Border>
    <div class="card">
      <div class="card-header">方法事件处理器-无参</div>
      <div class="card-body">
        <n-button @click="add()">count:{{ count }}</n-button>
      </div>
    </div>
  </Border>
  <Border>
    <div class="card">
      <div class="card-header">方法事件处理器--传参</div>
      <div class="card-body">
        <n-button @click="addStep(4,$event)">count:{{ count }}</n-button>
      </div>
    </div>
  </Border>
  <border>
    <div class="card">
      <div class="card-header">按键修饰符</div>
      <div class="card-body">
        <n-input type="textarea" v-model:value="content" @keydown.enter="submit" />

      </div>
    </div>
  </border>

</template>

<style scoped>

</style>